<template>
  <div class="container">
    <el-button slot="reference" type="primary" icon="el-icon-add"
               style="float: left;position: relative;left: 10px; width: 200px;margin-bottom: 20px"
               @click="toSelect">添加资源
    </el-button>
    <el-table
        :data="resourceList"
        border
        style="">
      <el-table-column
          fixed
          prop="resourceName"
          label="资源名"
          height="10"
          width="200">
      </el-table-column>
      <el-table-column label="发布时间"
                       width="245">
        <template slot-scope="scope">
          {{ dateFormat(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column label="更新时间"
                       width="245">
        <template slot-scope="scope">
          {{ dateFormat(scope.row.updateTime) }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="success"
              @click="detail(scope.row)">查看详情
          </el-button>
          <el-button
              size="mini"
              type="danger"
              v-if="user.role != 2"
              @click="remove(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 详情弹框 -->
    <el-dialog :title="detailDialogTitle" :visible="detailDialogVisible" @close="detailDialogVisible = false">
      <a :href="url" target="_blank">{{ resourceType == 0 ? '点击下载' : '点击跳转播放' }}</a>
    </el-dialog>
  </div>


</template>

<script>
export default {
  name: "ClassDirResourceList",
  data() {
    return {
      resourceType: 0,
      resourceList: [],
      resourceIds: [],
      dirId: -1,
      classIdid: -1,
      detailDialogVisible: false,
      detailDialogTitle: '',
      user: JSON.parse(localStorage.getItem("user")),
      url: '',
      addDialogVisible: false,
    }
  }, methods: {
    //跳转到选择页面
    toSelect() {
      const _this = this;
      this.$router.push({
        path: '/resourceSelect',
        query:{
          dirId: _this.dirId,
          classIdid: _this.classIdid,
        }
      });
    },
    //显示详情
    detail(row) {
      this.detailDialogVisible = true;
      this.resourceType = row.resourceType;
      this.detailDialogTitle = row.resourceName;
      this.url = row.resourceUrl;
    },
    dateFormat(time) {
      var date = new Date(time);
      var year = date.getFullYear();
      var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
    },
    getInit() {
      const _this = this;
      axios.get("http://localhost:8080/classDirResource/findStuClassDirResource/" + _this.dirId + "/" + _this.classIdid).then(function (resp) {
        _this.resourceList = resp.data.data;
        console.log(_this.resourceList)
      })
    }
  },
  created() {
    this.getInit();
  }
}
</script>

<style scoped>

</style>
